<template>
  <a-modal
    :title='Title'
    :width="800"
    class="modle"
    v-model="show"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['id']"/>
      </a-form-item>


      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :label="i18n('form.appId','应用')"
      >
        <a-select v-decorator="['appId', {initialValue:'',rules: [{ required: true, message: i18n('form.appId','应用','select') }]}]" @select="appChange">
          <a-select-option v-for="(action) in sysAppAllData" :key="action.appId" >{{ action.clientName }}</a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :label="i18n('form.authority','上级权限')"
      >
        <a-tree-select
          v-decorator="['parentId', {rules: [{ required: true, message: i18n('form.authority','上级权限','select') }]}]"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          :treeData="permissions"
          :placeholder="i18n('form.authority','上级权限')"
          treeDefaultExpandAll
        >
        </a-tree-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :label="i18n('form.menuType','菜单类型')"
      >
        <a-select v-decorator="['menuType', {initialValue:'M',rules: [{ required: true, message:i18n('form.menuType','菜单类型','select') }]}]" @select="menuTypeChange">
          <a-select-option :value="'M'">{{$comi18('business.folder','目录')}}</a-select-option>
          <a-select-option :value="'C'">{{$comi18('business.menu','菜单')}}</a-select-option>
          <a-select-option :value="'F'">{{$comi18('business.button','按钮')}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :label="i18n('form.permission','权限名称')"
      >
        <a-input
          v-decorator="['name',{rules: [{ required: true, message:i18n('form.permission','权限名称','input')}]}]"
          :placeholder="i18n('form.nameMake','起一个名字')"/>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="menuType!='F'"
        :label="i18n('form.menuKey','标识键')"
      >
        <a-input
          v-decorator="['menuKey',{initialValue:'',rules: [{ required: true, message: i18n('form.key','动态菜单唯一键','input') }]}]"
          :placeholder="i18n('form.keySush','标识键：如\'user\'')"/>
      </a-form-item>



      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="menuType!='F'"
      >
        <span slot="label">{{i18n('form.component','组件')}}
          <a-tooltip :title="i18n('msa.componentTitle','routerUtil中定义的组件或views文件下的路径.....')">
            <a-icon type="question-circle-o"/>
          </a-tooltip>
        </span>
        <a-input
          v-decorator="['component',{rules: [{ required: true, message: i18n('form.component','组件','input') }]}]"
          :placeholder="i18n('form.component','组件')"/>
      </a-form-item>

      <a-form-item
        :labelCol1="labelCol1"
        :wrapperCol1="wrapperCol1"
        :label="i18n('form.parameter','菜单参数')"
      >
        <a-input v-decorator="['params']" :placeholder="i18n('form.parameter','菜单参数')"/>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="menuType!='F'"
        :label="i18n('form.icon','图标')"
      >
        <a-input v-decorator="['iconPc',{rules: [{ required: true, message: i18n('form.icon','图标','select') }]}]" ref="iconInput"
                 @click="iconselect()" :enterButton=i18n('form.icon','图标','select') :placeholder=i18n('form.icon','图标','select')>
          <a-icon slot="prefix" :type="icon"/>
          <a-icon slot="suffix" type="close-circle" @click="emitEmpty"/>
        </a-input>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :label="i18n('form.sequence','显示顺序')"
      >
        <a-input-number
          v-decorator="['orderNum',{initialValue:'1',rules: [{ required: true, message: i18n('msa.sequenceDesc','请输入顺序数字')}]}]"
          :placeholder="i18n('form.sequence','显示顺序')"/>
      </a-form-item>



    </a-form>
    <iconSelector-modal ref="modal" @ok="setIcon" :icon="icon"/>
  </a-modal>
</template>
<script>
  import SysMenuApi from '@/api/system/core/sysMenu'
  import SysAppApi from '@/api/system/core/sysApp'
  import {pick} from 'lodash-es'
  import IconSelectorModal from './IconSelectorModal.vue'
  import {App} from "@lowcode/jpaas-common-lib"

  export default {
    name: 'SysMenuEdit',
    mixins:[App],
    components: {
      IconSelectorModal
    },
    data () {
      return {
        Title:'',//标题
        description: this.i18n('msa.description','列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。'),
        show: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        permissions: [{ key: 0, value: '0', title:this.i18n('form.none','无')}],
        mdl: {},
        icon: 'smile',
        menuType: '',

        sysAppAllData: [],
        form: this.$form.createForm(this)
      }
    },
    beforeCreate () {
    },
    created () {

      this.loadPermissions()
      this.loadAllSysApp()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"sysMenu",key);
        },
      loadAllSysApp () {
        SysAppApi.getById(this.curApp.appId).then(data => {
          this.sysAppAllData = data;
        })
      },
      menuTypeChange (type) {
        this.menuType = type
      },
      emitEmpty () {
        this.$refs.iconInput.focus()
        this.form.setFieldsValue({ 'iconPc': '' })
      },
      iconselect () {
        this.$refs.modal.show()
      },
      setIcon (icon) {
        this.iconPc = icon
        this.form.setFieldsValue({ 'iconPc': icon })
      },
      add (parentId) {
        this.form.resetFields()
        this.edit({ parentId: parentId || '0' })
        this.Title=this.$ti18('rxList.add','新增')
      },
      edit (record) {
        this.Title=this.$ti18('rxList.editBtn',"编辑")
        this.mdl = Object.assign({}, record)
        this.show = true
        this.menuType = this.mdl.menuType || 'M'
        this.$nextTick(() => {
          this.mdl.iconPc ? this.iconPc = this.mdl.iconPc : this.iconPc = 'smile'
          this.mdl.parentId += ''
          this.form.setFieldsValue(pick(this.mdl, 'appId','iconPc', 'id', 'parentId', 'menuType', 'visible', 'orderNum', 'name', 'menuKey', 'component'))
          // this.form.setFieldsValue({ ...record })
        })
      },
      loadPermissions () {
        SysMenuApi.getAllSysMenuList().then(res => {
          this.buildtree(res, this.permissions, '0')
        })
        console.log(this.permissions)
      },
      buildtree (list, arr, parentId) {
        list.forEach(item => {
          if (item.parentId === parentId) {
            var child = {
              key: item.id,
              value: item.id + '',
              title: item.name,
              children: []
            }
            this.buildtree(list, child.children, item.id)
            arr.push(child)
          }
        })
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            this.confirmLoading = true
            SysMenuApi.saveSysMenu(values).then(res => {
              if (res.code === 0) {
                this.$emit('ok')
              }
              this.show = false
            }).catch(() => {
              this.$message.error(this.$ti18('rxMsa.sysError','系统错误，请稍后再试!'))
            }).finally(() => {
              this.confirmLoading = false
            })
          }
        })
      }
    },
    watch: {
      /*
        'selectedRows': function (selectedRows) {
          this.needTotalList = this.needTotalList.map(item => {
            return {
              ...item,
              total: selectedRows.reduce( (sum, val) => {
                return sum + val[item.dataIndex]
              }, 0)
            }
          })
        }
        */
    }
  }
</script>
